<template>
    <div class="bigscreen" v-loading="listLoading">
        <div class="app_name">
            <span>{{appInfo.name}}</span>
        </div>
        <div class="bigs_head">
            <div class="bigs_time">
                <span>{{dateDay}}</span>
                <span>{{dateWeek}}</span>
                <span>{{dateTime}}</span>
            </div>
        </div>

        <div class="big_first">
            <div class="bigf_left">
                <div class="bigfl_div">
                    <div class="bigfld_title">
                        <span>设备在线离线统计</span>
                    </div>
                    <div class="biffld_total">
                        <div class="bt_main">
                            <span>设备在线总数</span>
                            <span>{{appInfo.device_info.line}}</span>
                        </div>
                        <div class="bt_main">
                            <span>设备离线总数</span>
                            <span style="color: #FFB325;">{{appInfo.device_info.off}}</span>
                        </div>
                    </div>
                    <div class="swiper">

                  
                        <div class="biffld_list swiper-wrapper">
                            <template v-for="(item,index) in typeCountList">
                               
                          
                            <div class="blclass_div swiper-slide">
                                <div class="blcd_title">
                                    <span>{{item.device_type_name}}</span>
                                </div>
                                <div class="blcd_content">
                                    <div class="blcdc_div">
                                        <span>在线</span>
                                        <span style="color: #37F67D;">{{item.line_num}}</span>
                                    </div>
                                    <div class="blcdc_div">
                                        <span>离线</span>
                                        <span style="color: #FFB325;">{{item.leave_num}}</span>
                                    </div>
                                    <div class="blcdc_div">
                                        <span>报警中</span>
                                        <span style="color: #D12323;">{{item.warning_num}}</span>
                                    </div>
                                </div>
                                <div class="borderxian" ></div>
                            </div>
                           
                        </template>
                       
                           
                        </div>
                    </div>
                </div>
                <div class="bigfl_div" style="margin-top: 20px;">
                    <div class="bigfld_title">
                        <span>设备报警统计</span>
                    </div>
                    <div class="biffld_type">
                        <div class="bt_type_main">
                            <span>{{warningTotal[0].warning_num}}</span>
                            <span>蓝色报警</span>
                        </div>
                        <div class="bt_type_main">
                            <span>{{warningTotal[1].warning_num}}</span>
                            <span style="color: #C8BF00;">黄色报警</span>
                        </div>
                        <div class="bt_type_main">
                            <span>{{warningTotal[2].warning_num}}</span>
                            <span style="color: #FF7700;">橙色报警</span>
                        </div>
                        <div class="bt_type_main">
                            <span>{{warningTotal[3].warning_num}}</span>
                            <span style="color: #D12323;">红色报警</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bigf_center">
                <div class="bigfld_title">
                    <span>地图数据展示</span>
                </div>
                <div class="bigfld_content" id="bigfld_content" v-if="!appInfo.face_img">

                </div>
                <div class="face_img_div" v-else>
                    <img ref="face_img" class="face_img" :src="appInfo.face_img" :style="{width:widthImg+'%',height:heightImg+'%'}">
                    <template v-for="item in deviceList">
                        <div class="deviceInfo" v-if="item.address_info.face_img_coordinate_info.imgY" :style="{top: (item.address_info.face_img_coordinate_info.imgY-12)+'px',left:(item.address_info.face_img_coordinate_info.imgX+25)+'px'}">
                            <div class="info">
                                <span>{{item.name}}</span>
                            </div>
                            <div class='poiont_div'>
                                <img src="//webapi.amap.com/theme/v1.3/markers/b/mark_bs.png">
                            </div>
                        </div>
                    </template>
                   

                </div>
            </div>
            <div class="bigf_right">
                <div class="bigfr_div">
                    <div class="bigfld_title">
                        <span>项目基本情况</span>
                    </div>
                    <div class="bigfr_content">
                        <div class="bc_div">
                            <span>项目名称</span>
                            <span>{{appInfo.name}}</span>
                        </div>
                        <div class="bc_div">
                            <span>干滩长度</span>
                            <span>{{ appInfo.device_info.dry_beach_length }} m</span>
                        </div>
                        <div class="bc_div">
                            <span>干滩坡度</span>
                            <span>{{appInfo.device_info.dry_beach_slope}}</span>
                        </div>
                        <div class="bc_div">
                            <span>库水位</span>
                            <span>{{appInfo.device_info.ksw_elevation_h}} m</span>
                        </div>
                        <div class="bc_div">
                            <span>安全超高</span>
                            <span>{{appInfo.device_info.safe_h}} m</span>
                        </div>
                    </div>
                </div>
                
                <div class="bigfr_div" style="margin-top: 20px;">
                    <div class="bigfld_title">
                        <span>设备列表</span>
                    </div>
                    <div class="bigfrc_head">
                        <div class="bh_div">
                            <span>设备名称</span>
                        </div>
                        <div class="bh_div">
                            <span>设备类型</span>
                        </div>
                        <div class="bh_div" style="flex:2">
                            <span>最新值</span>
                        </div>
                        <div class="bh_div">
                            <span>是否报警</span>
                        </div>
                        <div class="bh_div">
                            <span>报警等级</span>
                        </div>
                    </div>
                    <vue-seamless-scroll :data="deviceList"  :class-option="{step: 0.05, limitMoveNum: 6}" class="seamless-warp">
                        <div class="bigfrc_content">
                            <template v-for="item in deviceList">
                                <div class="bigfrcc_div">
                                <div class="itemdiv">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <div class="itemdiv">
                                        <span>  {{ getDviceTypeName(item.device_type)  }}</span>
                                    </div>
                                    <div class="itemdiv itemmaxdiv" style="flex:2" :title="getDataList(item.last_real_value)">
                                        <span>{{getDataList(item.last_real_value)}}</span>
                                    </div>
                                    <div class="itemdiv">
                                        <span v-if="item.last_warning_id" style="color: #D12323;">是</span>
                                        <span v-else>否</span>
                                    </div>
                                    <div class="itemdiv">
                                        <span v-if="item.last_warning_id" :style="{color:item.last_warning_type=='yellow'?'#ffd600':item.last_warning_type}">{{colorList[item.last_warning_type]}}报警</span>
                                    </div>
                                </div>
                            </template>
                        
                        </div>
                    </vue-seamless-scroll>
                   
                </div>
            </div>
        </div>

     
            <div class="big_bottom swiperNext">
                <div class="bb_div_list swiper-wrapper">
                    <template v-for="item in deviceDataList" v-if="isValidDeviceType(item)">
                        <div class="bb_div swiper-slide">
                            <div class="bigfld_title">
                                <span>{{item.device_type_name}}最近采集数据</span>
                            </div>
                            <div class="bigfrc_head">
                                <div class="bh_div" style="min-width: 80px;">
                                    <span>设备名称</span>
                                </div>
                            
                                <div class="bh_div" style="flex:2.5">
                                    <span>最新值</span>
                                </div>
                            
                                <div class="bh_div" style="flex:2">
                                    <span>时间</span>
                                </div>
                            </div>
                            <vue-seamless-scroll :data="item.dataList"  :class-option="{step: 0.05, limitMoveNum: 6}" class="seamless-warp">
                                <div class="bigfrc_content bigfrc_content_next">
                                    <template v-for="json in item.dataList">
                                        <div class="bigfrcc_div">
                                        <div class="itemdiv" style="min-width: 80px;">
                                                <span>{{json.device_name}}</span>
                                            </div>
                                        
                                            <div class="itemdiv itemmaxdiv" style="flex:2.2" :title="getDataList(json.real_value)">
                                                <span>{{getDataList(json.real_value)}}</span>
                                            </div>
                                        
                                            <div class="itemdiv itemmaxdiv" style="flex:1.7" >
                                                <span>{{getTimeInfo(json.time)}}</span>
                                            </div>
                                        </div>
                                    </template>
                                
                                </div>
                            </vue-seamless-scroll>
                            
                        </div>

                    
                    </template>
                  

            </div>
        </div>

        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'

export default {
    data() {
        return {
            listLoading:false,
            dateDay:"",
            dateWeek:"",
            dateTime:"",
            map:null,
            deviceList:[],
            app_id:"",
            deviceTypeList:[],
            colorList:{
                'yellow':'黄色',
                'red':"红色",
                'blue':"蓝色",
                'orange':'橙色'
            },
            warningTotal:[{},{},{},{}],
            appInfo:{
                device_info:{}
            },
            gps_info:{},
            swiper:null,
            typeCountList:[],


            deviceTypeList:[],

            deviceDataList:[],

            widthImg:100,
            heightImg:100,
        }   
    },
    computed: {
        isValidDeviceType() {
        return (item) => {
            const validTypes = ['dry_beach', 'gps_displacement', 'osmometer'];
            return validTypes.includes(item.device_type);
        };
        }
    },
    watch:{
      
    },
    created() {
        setInterval(()=>{
			this.getTIme();
		},1000)

      
    },
    mounted(){
        let _this=this
        document.addEventListener('wheel', function(event) {
            console.log(event)
            if(event.wheelDeltaY>0){
                if(_this.widthImg<=100){
                    _this.widthImg=100
                    _this.heightImg=100
                }
                else{
                    _this.widthImg=_this.widthImg-10;
                    _this.heightImg= _this.heightImg*(_this.widthImg/100)

                    
                }
                setTimeout(() => {
                    _this.jiSuanNum()
                });
            }
            if(event.wheelDeltaY<0){
                _this.widthImg=_this.widthImg+10;
                _this.heightImg= _this.heightImg*(_this.widthImg/100)

           
                console.log("放大")
                setTimeout(() => {
                    _this.jiSuanNum()
                });
               
            }
        // 在这里处理滚轮滚动事件
        });
        this.app_id=this.$route.query.app_id
        this.init();
    },
    methods: {

        jiSuanNum(){
            let widthNum=document.querySelector(".face_img").style.width
            let heightNum=document.querySelector(".face_img").style.height

            let widthpx=880*parseInt(widthNum)/100
            let heightpx=624*parseInt(heightNum)/100
            let numIndex=widthpx/550
            let numYIndex=heightpx/widthpx
            console.log(widthpx,heightpx)
            console.log(numIndex,numYIndex)
            this.deviceList.map(res=>{
                res.address_info.face_img_coordinate_info=res.address_info.face_img_coordinate?JSON.parse(res.address_info.face_img_coordinate):{imgX:0,imgY:0}
                
                res.address_info.face_img_coordinate_info.imgX=res.address_info.face_img_coordinate_info.imgX*numIndex
                res.address_info.face_img_coordinate_info.imgY=res.address_info.face_img_coordinate_info.imgY*numIndex*numYIndex
            })
         
        },

        createSwiper(){

            
   
  
            this.swiper = new Swiper ('.swiper', {
               
                loop: true, // 循环模式选项
                autoplay:true,
                slidesPerView: 5,
                spaceBetween: 0,
  
                loopFillGroupWithBlank: true,
              
            })        
        },


        init(){
            
            this.getDeviceList();
            this.getDeviceType();
            this.getWarningCount()
           
            this.getDeviceCount();
            this.getDeviceDataList();
        },

        getTimeInfo(time){
            return until.formatDatecode(time*1000)
        },

        async getDeviceDataList(){
            let form={
                page:1,
                page_size:200,
                app_id:this.app_id,
                device_type:"",
                device_id:"",
                // begin_time: Math.floor(new Date().getTime() / 1000) - 5 * 24 * 60 * 60,
                // end_time: Math.floor(new Date().getTime() / 1000),
                
            }
         
 
            let data=await homeapi.Smos_apiDevice_dataPageGet(form);
            if(data.error_code==0){
                data.data.list.map(res=>{
                    if(this.deviceTypeList.indexOf(res.device_type)<0){
                        let jsonData={
                            device_type:res.device_type,
                            device_type_name:res.device_type_name,
                            dataList:[res]
                        }
                        this.deviceTypeList.push(res.device_type)
                        this.deviceDataList.push(jsonData)
                    }
                    else{
                        this.deviceDataList.map(json=>{
                            if(json.device_type==res.device_type){
                                json.dataList.push(res)
                            }
                        })
                    }
                })
                if(this.deviceDataList.length>4){
                    this.$nextTick(()=>{
                        this.createSwiperNext();
                    })
                    
                }
               

                
                // this.list=data.data.list?data.data.list:[];
            }
        },
        createSwiperNext(){

            
   
            
            this.swiper = new Swiper ('.swiperNext', {
            
               
                autoplay:{
                 
                    delay: 30000,//1秒切换一次
 
                },
                slidesPerView: 4,
                spaceBetween: 0,
       
                loop: false,
                loopedSlides:6,
                loopFillGroupWithBlank: true
            
            })        
        },


        //获取分类统计
        async getDeviceCount(){
            let app_id=this.app_id
            let data=await homeapi.Smos_apiAppDevice_countGet({app_id});
            if(data.error_code==0){
                this.typeCountList=data.data.types;
                if(this.typeCountList.length>5){
                    this.$nextTick(()=>{
                        this.createSwiper();
                    })
                    
                }
            }
        },

        //获取报警统计
		async getWarningCount(){
			let app_id=this.app_id
			let device_id=""
			let begin_time=""
			let end_time=""
			let data=await homeapi.Smos_apiDevice_warningTime_countGet({app_id,device_id,begin_time,end_time});
			if(data.error_code==0){
				this.warningTotal=data.data;
			}
		},
		//获取在线统计
		async getAppInfo(){
			let app_id=this.app_id
			let data=await homeapi.Smos_apiAppDetailGet({app_id});
			if(data.error_code==0){
				this.appInfo=data.data;
                this.gps_info=data.data.gps_info;
                if(this.appInfo.face_img){
                   
                }
                else{
                    this.createMap()
                }
          
			}
		},
        getTIme(){
            this.dateTime=until.dateHourMin(new Date());
			this.dateDay=until.formatDate(new Date())
			this.dateWeek=until.getNowWeek();
        },
        createDeviceList(){
           
        },
        createMap(){
            let _this=this;
            window.AMapLoader.load({
                key: "4dcf7ff87677856989b63e34501cc00e", //申请好的Web端开发者 Key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            }).then((AMap) => {
                
                this.map = new AMap.Map("bigfld_content",{
                    center: [102.80, 25.004],
                    zoom:16,
                    layers:[
                        new AMap.TileLayer.RoadNet({
                            zIndex:25
                        }),
                        new AMap.TileLayer.Satellite()
                    ]
                });
               

                if(_this.gps_info){
                    console.log(_this.gps_info)
                    let gps_info=JSON.parse(_this.gps_info);
                    var polygonMain = new AMap.Polygon({
                        map: _this.map,
                        path: gps_info, // 多边形的点
                        strokeColor: "#FF33FF", 
                        strokeOpacity: 1,
                        strokeWeight: 6,
                        strokeOpacity: 0,
                        fillColor: '#1791fc',
                        fillOpacity: 0,
                        // 线样式还支持 'dashed'
                        strokeStyle: "solid",
                    });
                    var bounds = polygonMain.getBounds()
                    console.log(bounds)
                    // _this.map.setFitView(polygonMain)
                    var center = bounds.getCenter();
                    _this.map.setCenter(center); 
                }
                if(_this.deviceList.length){
                    _this.deviceList.map(res=>{

                        var marker = new AMap.Marker({
                            position: [res.address_info.gps_lng,res.address_info.gps_lat],
                            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                            anchor:'bottom-center',
                            offset: new AMap.Pixel(0, 0),
                            
                        });

                        marker.setMap(_this.map);

                        // 设置鼠标划过点标记显示的文字提示
                        marker.setTitle(res.name);

                        // 设置label标签
                        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                        marker.setLabel({
                            direction:'top',
                            offset: new AMap.Pixel(0, -5),  //设置文本标注偏移量
                            content: "<div class='info'>"+res.name+"</div>", //设置文本标注内容
                        });
                        // var text=new AMap.Text({
                        //     text:res.name,
                        //     anchor:'center', // 设置文本标记锚点
                        //     draggable:true,
                        //     cursor:'pointer',
                        //     angle:10,
                        //     style:{
                        //         'padding': '.75rem 1.25rem',
                        //         'margin-bottom': '1rem',
                        //         'border-radius': '.25rem',
                            
                        //         'width': '15rem',
                        //         'border-width': 0,
                        //         'background':"transparent",
                        //         'text-align': 'center',
                        //         'font-size': '20px',
                        //         'color': '#ffffff'
                        //     },
                        //     position:
                        // });
                        // text.setMap(_this.map);
                    })
                }
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
        },
        async getDeviceList(){
            let form={
                page:1,
                page_size:999999,
                name:''
            }
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiDevicePageGet(form);
            if(data.error_code==0){
                let numIndex=880/550

                let numYIndex=624/880
                console.log(numIndex,numYIndex)
                data.data.list.map(res=>{
                    res.address_info.face_img_coordinate_info=res.address_info.face_img_coordinate?JSON.parse(res.address_info.face_img_coordinate):{imgX:0,imgY:0}
                    
                    res.address_info.face_img_coordinate_info.imgX=res.address_info.face_img_coordinate_info.imgX*numIndex
                    res.address_info.face_img_coordinate_info.imgY=res.address_info.face_img_coordinate_info.imgY*numIndex*numYIndex
                })
                this.deviceList=data.data.list?data.data.list:[];
                this.getAppInfo();
            }
        },
        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },
        async getDeviceType(){
            let data=await homeapi.Smos_apiDeviceTypesGet();
            if(data.error_code==0){
                this.deviceTypeList=data.data;
            }
        },
        
        getDataList(dataList){
            let dataName=""
            dataList.map(res=>{
                if(dataName==""){
                    dataName=res.value_name+":"+res.value+res.value_unit
                }
                else{
                    dataName+=","+res.value_name+":"+res.value+res.value_unit
                }
            })
            return dataName
        },
        
    }
}
</script>
<style lang="css">
     .amap-icon img,
    .amap-marker-content img {
      width: 25px;
      height: 34px;
    }
    .info{
        background: transparent;
        border: 0px;
   }
   .amap-marker-label{
    background: transparent;
    border: 0px;
    color: #ffffff;
   }

</style>
<style lang="css" scoped>
.app_name{
    width: 100%;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #FFFFFF;
    line-height: 48px;
    letter-spacing: 8px;
    text-shadow: 0px -1px 0px #4A6A87, 0px 3px 3px #232B70;
    text-align: center;
    font-style: normal;
    text-transform: none;

}

    .bigscreen{
        width: 100%;
        height: 100%;
        background: url("../../assets/imgs/bigscreen.jpg");
        background-size: 100% 100%;
        max-width: 1920px;
        max-height: 1080px;
        min-width: 1920px;
        min-height: 1080px;
        display: inline-block;
    }
    .bigs_head{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 30px;
        box-sizing: border-box;
       
    }
    .bigs_time{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: bold;
        line-height: 30px;
        height: 30px;
    }
    .bigs_time span{
        margin-right: 20px;
    }
    .big_first{
        width: 100%;
        height: 674px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 10px;
    }
    .bigf_left{
        width: 470px;
        height: 100%;
    }
    .bigf_center{
        width: 880px;
        margin-left: 20px;
        height: 100%;
    }
    .bigf_right{
        width: 470px;
        height: 100%;
        margin-left: 20px;
    }
    .bigfl_div{
        width: 100%;
        height: 327px;
        display: inline-block;
    }
    .bigfld_title{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 30px;
        box-sizing: border-box;
        height: 50px;
       
    }
    .bigfld_title span{
        font-weight: 500;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 24px;
        text-shadow: 0px 1px 1px #0057FF;
        text-align: left;
        font-style: normal;
        text-transform: none;
       
    }   
    .biffld_total{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px;
    }
    .bt_main{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 14px;
        color: #FFFFFF;
        margin-top: 33px;
    }
 
    .bt_main span:last-child{
        font-size: 28px;
        color: #37F67D;
        font-weight: bold;
        line-height: 26px;
        line-height: 36px;
        margin-top: 30px;
    }
    .biffld_list{
       
        display: flex;
        align-items: center;
        justify-content: flex-start;

        box-sizing: border-box;
        margin-top: 50px;
    }
    .blclass_div{
        flex: 1;
        min-width: 20%;
        position: relative;
    
    }
    .blcd_title{
        width: 100%;
        font-size: 14px;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 14px;
    }
    .blcd_content{
        width: 100%;
        display: inline-block;
        margin-top: 10px;
        padding:0 15px;
        box-sizing: border-box;
    }
    .blcdc_div{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 14px;
    }
    .blcdc_div span:last-child{
        font-size: 18px;
        font-weight: bold;
    }
    .biffld_type{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 70px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .bt_type_main{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 28px;
        font-weight: bold;
        line-height: 28px;
        color: #FFFFFF;
    }
    .bt_type_main span:last-child{
        font-size: 14px;
        color: #00B7FF;
        line-height: 24px;
        margin-top: 80px;
    }
    .bigfld_content{
        width: 100%;
        height: 624px;
    }
    .bigfr_content{
        width: 100%;
        height: 260px;
        margin-top: 15px;
    }
    .bc_div{
        width: calc(100% - 60px);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 45px;
        font-size: 16px;
        line-height: 24px;
        color: #FFFFFF;
        margin-left: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #003EA8;
    }
    .bc_div span:last-child{
        margin-left: 15px;
        color: #FFB325;
        font-size: 16px;
        font-weight: bold;
    }
    .bigfrc_head{
        width: 100%;
        height: 45px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px;
    }
    .bh_div{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        text-align: left;
        color: #FFFFFF;
    }
    .itemdiv{
      
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        text-align: left;
        color: #FFFFFF;
    }
    .bigfrcc_div{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        height: 35px;
    }
    .itemmaxdiv{

        height: 35px;
        min-width: 32%;
        white-space: nowrap;   /* 强制不换行 :ml-search[white-space] */
        overflow: hidden;      /* 隐藏溢出内容 :ml-search[overflow] */
        text-overflow: ellipsis; /* 显示省略号 :ml-search[text-overflow] */
        margin-right: 10px;
        cursor: pointer;

    }
    .bigfrc_content{
        width: 100%;
        height: 240px;
        overflow: hidden;
    }
    .swiper{
        width: 100%;
        overflow: hidden;
    }
    .borderxian{
        width: 1px;
        height: 64px;
        background: #003EA8;
        position: absolute;
        top: 30px;
    }
    .big_bottom{
        width: calc(100% - 60px);
        margin-left: 30px;
        box-sizing: border-box;
       
        margin-top: 20px;
        overflow: hidden;
    }
    .bb_div_list{
        
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .bb_div{
        width: 605px;
        min-width: 605px;
        height: 248px;
        background: url("../../assets/imgs/item_bg.png");
        background-size: 100% 100%;
        margin-left: 22px;
    }
    .bb_div:first-child{
        margin-left: 0px;
    }
    .bb_div_list{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .bigfrc_content_next{
        height: 165px;
    }
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
    .face_img_div{
        width: 100%;
        height: 625px;
        overflow: auto;
        position: relative;
    }
 
    .face_img_div img{
        width: 100%;
        height: 100%;
       
    }
    .deviceInfo{
        position: absolute;
        width: max-content;

    }
    .poiont_div img{
        width: 25px;
        height: 34px;
    }
</style>